<template>
    <div class="footer_container">
        <mt-tabbar v-model="tabbarSelected">
            <mt-tab-item id="/home" :class="{'is-selected':'/home'=== this.$route.path}">
                <i slot="icon" class="iconfont iconzhuye"></i>
                <span>首页</span>
            </mt-tab-item>
            <mt-tab-item id="/search" :class="{'is-selected':'/search'=== this.$route.path}">
                <i slot="icon" class="iconfont iconmagnifiersearch"></i>
                <span>搜索</span>
            </mt-tab-item>
            <mt-tab-item id="/order" :class="{'is-selected':'/order'=== this.$route.path}">
                <i slot="icon" class="iconfont icondingdanguanli"></i>
                <span>订单</span>
            </mt-tab-item>
            <mt-tab-item id="/profile" :class="{'is-selected':'/profile'=== this.$route.path}">
                <i slot="icon" class="iconfont iconme_defalutbeifen"></i>
                <span>我的</span>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        name: "FooterGuide",
        data(){
            return{
                tabbarSelected:'',
                active:true
            }
        },
        watch:{
            'tabbarSelected':function (now) {
                this.$router.push(now);
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../../assets/style/rem.scss";
.footer_container{
    .mint-tabbar{
        line-height:1.5;
        span{
            font-size: rem(15);
            font-family: 微软雅黑;
        }
        .iconfont{
            font-size: 19px;
        }
        .mint-tab-item-icon{
            margin: 0 auto 0px;
        }
    }
}
</style>